<template>
  <div class="container">
    <div class="header">
      <top-bar
        :isBtnDisabled="isMulti"
        @on-refresh="onRefresh"
        @login="handleLogin"
        @setting="handleSettings"
        @irparams="handleIRParams"
        @alarmsettings="handleAlarmSettings"
        @takephoto="handleTakePhoto"
        @recordvideo="handleRecordVideo"
        @irrules="handleIRRules"
        @uvcolor="handleUVColor"
        @uvcount="handleUVCount"
      />
    </div>
    <div class="main-content">
      <div class="sidebar">
        <left-bar
          ref="leftBar"
          :isBtnDisabled="isMulti"
          :cameraAllInfo="cameraAllInfo"
          @preset-set="handlePresetSet"
          @path-set="handlePathSet"
          @on-refresh="onRefresh"
        />
      </div>
      <div class="content-area">
        <bread-nav
          ref="breadNav"
          :cameraAllInfo="cameraAllInfo"
          @change-nav="changeNav"
        />
        <multi-media
          v-if="isMulti"
          :cameraAllInfo="cameraAllInfo"
          @double-click="doubleClick"
        />
        <single-media ref="singleMedia" v-else />
      </div>
    </div>
    <login-dialog
      ref="loginDialog"
      :cameraAllInfo="cameraAllInfo"
      @on-refresh="onRefresh"
    />
    <setting-dialog ref="settingDialog" @on-refresh="onRefresh" />
    <IRParamsDialog ref="irParamsDialog" @on-refresh="onRefresh" />
    <alarm-dialog ref="alarmDialog" @on-refresh="onRefresh" />
    <UVColorDialog ref="uvColorDialog" @on-refresh="onRefresh" />
    <PathCruise ref="pathCruise" @refresh-table="RefreshPathTable" />
    <preset-dialog ref="presetDialog" @refresh-table="RefreshPresetTable" />
  </div>
</template>

<script>
import { getCameraList } from '@/api/camera.js';
import AlarmDialog from './components/AlarmDialog.vue';
import BreadNav from './components/BreadNav.vue';
import IRParamsDialog from './components/IRParamsDialog.vue';
import LeftBar from './components/LeftBar';
import LoginDialog from './components/LoginDialog.vue';
import MultiMedia from './components/MultiMedia';
import PathCruise from './components/PathCruise.vue';
import PresetDialog from './components/PresetDialog.vue';
import SettingDialog from './components/SettingDialog.vue';
import SingleMedia from './components/SingleMedia';
import TopBar from './components/TopBar';
import UVColorDialog from './components/UVColorDialog.vue';
export default {
  name: 'VideoPlayer',
  components: {
    LeftBar,
    TopBar,
    MultiMedia,
    SingleMedia,
    BreadNav,
    LoginDialog,
    SettingDialog,
    IRParamsDialog,
    AlarmDialog,
    UVColorDialog,
    PathCruise,
    PresetDialog,
  },
  data() {
    return {
      // 展示多个或者一个
      isMulti: true,
      // 摄像头全部信息
      cameraAllInfo: [],
      // 转动速度
      speed: '4',
    };
  },
  mounted() {
    // 监听页面缩放比例提醒用户调整浏览器比例
    window.onresize = () => {
      // 获取窗口宽度
      const width = document.documentElement.clientWidth;
      // 根据窗口宽度判断是否需要提示
      if (width < 1908) {
        this.$message.warning('建议缩放浏览器到适当比例，以获得最佳体验！');
      }
    };
    this.getCameraAll();
  },
  methods: {
    // 刷新
    async onRefresh(id) {
      await this.getCameraAll();
      const index = this.cameraAllInfo.findIndex((item) => item.id === id);
      this.$store.commit(
        'playVideo/setCurrentPlayingVideo',
        this.cameraAllInfo[index]
      );
    },
    // 获取摄像头全部数据
    async getCameraAll() {
      try {
        const res = await getCameraList();
        if (res.code === 200 && res.data.length > 0) {
          this.cameraAllInfo = res.data.map((item) => {
            return {
              id: item.id,
              cameraId: item.camera_id,
              channelName: item.name,
              channelUrl: item.video_url,
              sort: item.sort,
              alarmScreenshotUrl: item.alarm_screenshot_url,
              color: item.color,
              envTemperature: item.environment_temperature,
              gain: item.gain,
              irPhotons: item.ir_photons,
              irTemperature: item.ir_temperature,
              mode: item.mode,
              refRate: item.reflection_rate,
              refTemperature: item.reflection_temperature,
              relHumidity: item.relative_humidity,
              screenshotUrl: item.screenshot_url,
              speed: item.speed,
              temDistance: item.temperature_distance,
              videoPath: item.video_path,
            };
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 处理双击事件
     */
    doubleClick(stream) {
      this.$store.commit('playVideo/setCurrentPlayingVideo', stream);
      if (stream) {
        // 处理双击事件，例如切换到单视频播放模式
        this.isMulti = false;
        // stream 在cameraAllInfo数组的索引是什么
        const index = this.cameraAllInfo.findIndex(
          (item) => item.id === stream.id
        );
        this.$refs.breadNav.setActiveIndex(index + 1);
      } else {
        this.isMulti = true;
      }
    },
    /**
     * 处理导航变化事件
     */
    changeNav(nav) {
      // 根据导航变化设置当前播放的视频
      if (nav === 0 || nav === null) {
        // 如果点击的是全部
        this.isMulti = true;
        this.$store.commit('playVideo/setCurrentPlayingVideo', '');
        return;
      }
      this.$store.commit(
        'playVideo/setCurrentPlayingVideo',
        this.cameraAllInfo[nav - 1]
      );
      this.isMulti = false;
    },
    /**
     * 处理登录
     */
    handleLogin() {
      this.$refs.loginDialog.show();
    },
    /**
     * 处理设置
     */
    handleSettings() {
      this.$refs.settingDialog.show();
    },
    /**
     * 处理ir参数设置
     */
    handleIRParams() {
      this.$refs.irParamsDialog.show();
    },
    /**
     * 处理告警设置
     */
    handleAlarmSettings() {
      this.$refs.alarmDialog.show();
    },
    /**
     * 处理截图
     */
    handleTakePhoto() {
      this.$refs.singleMedia.takeScreenshot(1);
    },
    /**
     * 处理录像
     */
    handleRecordVideo(isRecord) {
      this.$refs.singleMedia.handleRecordVideo(isRecord);
    },
    /**
     * 处理颜色
     */
    handleUVColor() {
      this.$refs.uvColorDialog.show();
    },
    /**
     * 处理计数
     */
    handleUVCount() {
      this.$refs.singleMedia.handleUVCount();
    },
    /**
     * 处理IR规则
     */
    handleIRRules(isLabel) {
      this.$refs.singleMedia.handleIRRules(isLabel);
    },
    /**
     * 处理预置点设置
     */
    handlePresetSet() {
      this.$refs.presetDialog.show();
    },
    /**
     * 处理路径巡航设置
     */
    handlePathSet() {
      this.$refs.pathCruise.show();
    },
    /**
     * 更新预置点表格
     */
    RefreshPresetTable() {
      this.$refs.leftBar.getPresetName();
    },
    /**
     * 更新路径巡航表格
     */
    RefreshPathTable() {
      this.$refs.leftBar.getPathName();
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

.header {
  flex: 0 0 50px; /* 固定高度，不随内容变化 */
  background-color: #f8f9fa; /* 背景颜色可自定义 */
  width: 100%;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  flex: 1 1 auto; /* 占用剩余空间 */
  /* overflow: hidden; 防止内容溢出 */
}

.sidebar {
  flex: 0 0 350px; /* 左侧栏固定宽度，可根据需要调整 */
  background-color: #ffffff; /* 背景颜色可自定义 */
  padding: 10px 0 0 0;
  box-sizing: border-box;
}

.content-area {
  flex: 1 1 auto; /* 占用剩余空间 */
  padding: 10px 0 0 10px; /* 内边距可自定义 */
  background-color: #ffffff; /* 背景颜色可自定义 */
  box-sizing: border-box;
}
</style>
